<template>
    <!-- <div class="about">
         <h1>This is an about page</h1>
         <el-button type="primary">Primary</el-button>

     </div>-->
  <!--  <div>-->
    <el-card style="width: 500px; height: 300px" shadow="hover">
<!--        <el-space wrap :size="10">-->
      <el-row>
          <el-col :span="6">
            <el-button type="primary" :icon="Edit" style="display: flex;height: 60px;width: 90px">预定会议</el-button>
          </el-col>
          <el-col :span="18">
        <el-space direction="vertical">
            <el-card style="width: 350px; height: 80px" shadow="hover"  @mouseenter="listBtnVisible=true" @mouseleave="listBtnVisible=false">
                <div class="parent">
                    <el-row :gutter="20" justify="start" class="xm">
                        <el-col :span="6">
                            <el-text class="text-wrapper" size="large" tag="b">代璐</el-text>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" justify="start" class="sj">
                        <el-col :span="7">
                            <el-text class="text-wrapper" size="">11:30-12:00</el-text>
                        </el-col>
                        <el-col :span="14">
                            <el-text class="text-wrapper" size="" style="color: #ff2222">待开始</el-text>
                            <!-- <div style="font-size: 12px;color: #ff2222">待开始</div>-->
                        </el-col>
                    </el-row>
                    <!--                    style="position: absolute;top: 10px;right: 5px"-->

                    <div class="child" v-if="listBtnVisible"  >
                        <el-space  direction="horizontal" alignment="start">
                        <el-dropdown display="listBtnVisible" size="small">
                            <el-button size="small">...</el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="getOne">
                                        <el-text class="mx-1" size="">查看详情</el-text>
                                    </el-dropdown-item>
                                    <el-dropdown-item command="up">
                                        <el-text class="mx-1" size="">修改</el-text>
                                    </el-dropdown-item>
                                    <el-dropdown-item command="del">
                                        <el-text class="mx-1"  style="color: #ff2222" size="">删除</el-text>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <el-button type="primary"  size="small">入会</el-button>
                        </el-space>
                    </div>
                </div>
            </el-card>
            <el-card style="width: 350px; height: 80px" shadow="hover"  @mouseenter="listBtnVisible1=true" @mouseleave="listBtnVisible1=false">
                <div class="parent">
                    <el-row :gutter="20" justify="start" class="xm">
                        <el-col :span="6">
                            <el-text class="text-wrapper" size="large" tag="b">代璐</el-text>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" justify="start" class="sj">
                        <el-col :span="7">
                            <el-text class="text-wrapper" size="">11:30-12:00</el-text>
                        </el-col>
                        <el-col :span="14">
                            <el-text class="text-wrapper" size="" style="color: #ff2222">待开始</el-text>
                            <!-- <div style="font-size: 12px;color: #ff2222">待开始</div>-->
                        </el-col>
                    </el-row>
                    <!--                    style="position: absolute;top: 10px;right: 5px"-->

                    <div class="child" v-if="listBtnVisible1"  >
                        <el-dropdown display="listBtnVisible">
                            <el-button>...</el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="getOne">
                                        <el-text class="mx-1" size="">查看详情</el-text>
                                    </el-dropdown-item>
                                    <el-dropdown-item command="up">
                                        <el-text class="mx-1" size="">修改</el-text>
                                    </el-dropdown-item>
                                    <el-dropdown-item command="del">
                                        <el-text class="mx-1"  style="color: #ff2222" size="">删除</el-text>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <el-button type="primary">入会</el-button>
                    </div>
                </div>
            </el-card>
            <el-card style="width: 350px; height: 80px" shadow="hover"  @mouseenter="listBtnVisible2=true" @mouseleave="listBtnVisible2=false">
                <div class="parent">
                    <el-row :gutter="20" justify="start" class="xm">
                        <el-col :span="6">
                            <el-text class="text-wrapper" size="large" tag="b">代璐</el-text>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" justify="start" class="sj">
                        <el-col :span="7">
                            <el-text class="text-wrapper" size="">11:30-12:00</el-text>
                        </el-col>
                        <el-col :span="14">
                            <el-text class="text-wrapper" size="" style="color: #ff2222">待开始</el-text>
                            <!-- <div style="font-size: 12px;color: #ff2222">待开始</div>-->
                        </el-col>
                    </el-row>
                    <!--                    style="position: absolute;top: 10px;right: 5px"-->

                    <div class="child" v-if="listBtnVisible2"  >
                        <el-dropdown  display="listBtnVisible">
                            <el-button>...</el-button>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="getOne">
                                        <el-text class="mx-1" size="">查看详情</el-text>
                                    </el-dropdown-item>
                                    <el-dropdown-item command="up">
                                        <el-text class="mx-1" size="">修改</el-text>
                                    </el-dropdown-item>
                                    <el-dropdown-item command="del">
                                        <el-text class="mx-1"  style="color: #ff2222" size="">删除</el-text>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                        <el-button type="primary">入会</el-button>
                    </div>
                </div>
            </el-card>
        </el-space>
          </el-col>
      </el-row>
<!--        </el-space>-->
    </el-card>
<!--    </div>-->
    <el-card style="width: 500px; height: 800px; padding-bottom:20px " shadow="hover">
        <el-form :model="form1" label-width="auto" style="max-width: 600px">
            <div class="div_text">预定会议</div>



            <el-form-item label="会议时间">
                <el-date-picker v-model="form1.value1" type="date" :size="size" style="width: 200px"/>
                <!--</el-form-item>
                <el-form-item label="会议时间">-->
                <el-select v-model="form1.value2" placeholder="" style="width: 80px">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="会议时长">
                <el-select v-model="form1.value3" placeholder="" style="width: 160px">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="会议主题">
                <el-input v-model="form1.value4"/>
            </el-form-item>
            <el-form-item label="与会人">
                <el-space wrap :size="size">
                <el-card  shadow="never" >
                    <el-row>
                    <el-avatar :size="25" :src="url" />
                    <el-text class="text-wrapper" size="small">代璐</el-text>
                    </el-row>
                </el-card>
                    <el-card shadow="never" >
                        <el-row>
                            <el-avatar :size="25" :src="url" />
                            <el-text class="text-wrapper" size="small">代璐</el-text>
                        </el-row>
                    </el-card>
                    <el-card shadow="never" >
                        <el-row>
                            <el-avatar :size="25" :src="url" />
                            <el-text class="text-wrapper" size="small">代璐</el-text>
                        </el-row>
                    </el-card>
                </el-space>

                <el-button type="primary"  @click="dialogAddVisible = true" link>添加</el-button>

                <el-dialog v-model="dialogAddVisible" title="参会人员" width="500" height="800">
                    <template>
                        <el-tree
                                style="max-width: 600px"
                                :data="data"
                                show-checkbox
                                node-key="id"
                                :default-expanded-keys="[2, 3]"
                                :default-checked-keys="[5]"
                                :props="defaultProps"
                        />
                    </template>
                </el-dialog>

               <!-- <el-input/>-->
            </el-form-item>
            <el-form-item label="会议地点">
                <el-input v-model="form1.value5"/>
            </el-form-item>
            <el-form-item label="会议主题照片">
                <el-upload action="#" list-type="picture-card" :auto-upload="false">
                    <el-icon>
                        <Plus/>
                    </el-icon>
                    <template #file="{ file }">
                        <div>
                            <img class="el-upload-list__item-thumbnail" :src="file.url" alt=""/>
                            <span class="el-upload-list__item-actions">
                              <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                <el-icon><zoom-in/></el-icon>
                              </span>
                              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                <el-icon><Download/></el-icon>
                              </span>
                              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                <el-icon><Delete/></el-icon>
                              </span>
                            </span>
                        </div>
                    </template>
                </el-upload>

            </el-form-item>
            <el-form-item label="会议文档材料">
                <el-button type="primary" link>上传</el-button>
            </el-form-item>
            <el-form-item label="会议纪要">
            <el-input
                    v-model="form1.textarea"
                    style="width: 100%"
                    :rows="5"
                    type="textarea"
                    placeholder=""
            />      </el-form-item>
            <el-button type="primary" style="width: 98%;height: 40px">预定</el-button>
        </el-form>
    </el-card>

    <el-card style="width: 400px; height: 800px" shadow="hover" v-if="false">
        <div>
            <el-row>
                <el-text class="mx-1" size="large" tag="b">会议的主题</el-text>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-row>
                        <el-text class="mx-1" size="large" tag="b">10 : 00</el-text>
                    </el-row>
                    <el-row>
                        <el-text class="mx-1" size="">2024年03月09日</el-text>
                    </el-row>
                </el-col>

                <el-col :span="6">
                    <el-row>30分钟</el-row>
                    <el-row></el-row>
                </el-col>

                <el-col :span="8">
                    <el-row>
                        <el-text class="mx-1" size="large" tag="b">10 : 30</el-text>
                    </el-row>
                    <el-row>
                        <el-text class="mx-1" size="">2024年03月09日</el-text>
                    </el-row>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="5">
                    <el-text class="mx-1" size="">会议地点</el-text>
                </el-col>
                <el-col :span="15">
                    <el-text class="mx-1" size="">XXXXXXXXXXXXX</el-text>
                </el-col>
            </el-row>
        </div>
    </el-card>

</template>

<script setup>
// import { ElMessage } from 'element-plus';

import {ref,reactive} from 'vue'
import {Edit, Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

// import { UploadFile } from 'element-plus'

const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const disabled = ref(false);
const url="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";
const dialogAddVisible = ref(false);
let listBtnVisible = ref(false);
let listBtnVisible1 = ref(false);
let listBtnVisible2 = ref(false);
const handleRemove = (file) => {
    console.log(file)
}

const handlePictureCardPreview = (file) => {
    dialogImageUrl.value = file.url
    dialogVisible.value = true
}

const handleDownload = (file) => {
    console.log(file)
}

// const handleAddPsn ={
//
// }

const form1 = reactive({
        "value1": "",
        "value2": "",
        "value3": "",
    "value4": "",
    "value5": "",
    "value6": "",
    "textarea":""
    }
)
const data = [
    {
        id: 1,
        label: 'A组',
        children: [
            {
                id: 4,
                label: '张三',
                children: [
                    {
                        id: 9,
                        label: '张三',
                    },
                    {
                        id: 10,
                        label: '张三',
                    },
                ],
            },
        ],
    },
]
/*var list =  ([
    {
        "date": "2024-3-9",
        "time": "14:00",
        "subject": "主题",
        "psn": [{"name": "大大"}, {"name": "小小"}],
        "addr": "",
        "pic": "",
        "doc": "",
        "summary": ""
    }
])*/
</script>
<style>
    .el-space__item{

    }
    .div_btn{

    }

    .text-wrapper {
        display: flex; /* 设置为flex布局 */
        justify-content: flex-start;
        align-items: center; /* 将子元素在交叉轴上居中对齐 */
        height: 22px; /* 设置容器高度 */
    }

    .div_text {
        padding: 32px;
        color: #6b778c;
        font-size: 32px;
        font-weight: 600;
    }

    .xm {
        /*background-color: lightgray;*/
    }

    .sj {
        /*background-color: coral;*/
    }

    .parent {
        /*width: 300px; !* 父元素的宽度 *!*/
        /*height: 200px; !* 父元素的高度 *!*/
        /*background-color: lightgray;*/
        position: relative; /* 父元素需要设置为相对定位 */
    }

    .child {
        width: 150px; /* 子元素的宽度 */
        height: 80px; /* 子元素的高度 */
        /*background-color: coral;*/
        position: absolute; /* 子元素需要设置为绝对定位 */
        left: 50%; /* 左边距为父元素宽度的一半 */
        transform: translateX(10%); /* 向左移动自身宽度的一半，达到水平居中效果 */
        top: 0; /* 上边距为0，表示与父元素顶部对齐 */
    }
</style>




